<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';
import { useUserStore } from '../stores/userStore'; // 引入 Pinia store
const userStore = useUserStore();

const activeIndex = ref('1');
const isLogin = ref(true);
const avatarUrl = ref('./static/images/avatar.png');
const nickname = ref('admin');
const user = ref({
  username: "admin",
  gender: "男",
  job: "前端开发工程师",
  sign: "代码千万行，注释第一行；开发不规范，同事泪两行。"
});
const isAdmin = ref(true);
const myArticleList = ref([
  { id: 1, title: 'Vue3.0新特性使用攻略', date: '2024-10-28' },
  { id: 2, title: 'Vite脚手架使用详解', date: '2024-10-25' }
]);
const articleList = ref([
  { id: 1, title: 'Vue3.0新特性使用攻略', date: '2024-10-28' },
  { id: 2, title: 'Vite脚手架使用详解', date: '2024-10-25' }
]);
const courseList = ref([
  { id: 1, title: '零基础学JavaScript', price: '¥49' },
  { id: 2, title: 'Vue.js从入门到实战', price: '¥199' }
]);
const productList = ref([
  { id: 1, image: './static/images/product1.png' },
  { id: 2, image: './static/images/product2.png' }
]);

const goToLogin = () => {
  window.location.href = './login.html';
};

const goToProfile = () => {
  window.location.href = './person.html';
};

// 使用 onMounted 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
  // 可以在这里初始化数据或执行其他操作
});

// 使用 onUpdated 生命周期钩子
onUpdated(() => {
  console.log('组件已更新');
  // 可以在这里处理数据更新后的逻辑
});

// 使用 onUnmounted 生命周期钩子
onUnmounted(() => {
  console.log('组件已卸载');
  // 可以在这里执行清理操作
});
</script>

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <el-menu-item index="1">
          <el-icon><i class="el-icon-s-home"></i></el-icon>
          <span>个人主页</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><i class="el-icon-user"></i></el-icon>
          <span>个人资料</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon><i class="el-icon-setting"></i></el-icon>
          <span>账号设置</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><i class="el-icon-message"></i></el-icon>
          <span>消息设置</span>
        </el-menu-item>
        <el-menu-item index="5">
          <el-icon><i class="el-icon-edit"></i></el-icon>
          <span>标签管理</span>
        </el-menu-item>
        <el-menu-item v-if="isAdmin" index="6">
          <el-icon><i class="el-icon-office-building"></i></el-icon>
          <span>后台管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-card>
        <el-row>
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <h2>{{ user.username }}</h2>
            <span>性别：{{ user.gender }}</span>
            <span>签名档：{{ user.sign }}</span>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <el-tabs>
          <el-tab-pane label="我发布的文章">
            <div v-if="myArticleList.length > 0">
              <el-row v-for="article in myArticleList" :key="article.id" style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-link type="primary">{{ article.title }}</el-link>
                  <p>{{ article.date }}</p>
                </el-col>
              </el-row>
            </div>
            <el-empty v-else description="暂无数据" />
          </el-tab-pane>
          <el-tab-pane label="我收藏的文章">
            <div v-if="articleList.length > 0">
              <el-row v-for="article in articleList" :key="article.id" style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-link type="primary">{{ article.title }}</el-link>
                  <p>{{ article.date }}</p>
                </el-col>
              </el-row>
            </div>
            <el-empty v-else description="暂无数据" />
          </el-tab-pane>
          <el-tab-pane label="我收藏的课程">
            <div v-if="courseList.length > 0">
              <el-row v-for="course in courseList" :key="course.id" style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-link type="primary">{{ course.title }}</el-link>
                  <p>{{ course.price }}</p>
                </el-col>
              </el-row>
            </div>
            <el-empty v-else description="暂无数据" />
          </el-tab-pane>
          <el-tab-pane label="我收藏的商品">
            <div v-if="productList.length > 0">
              <el-row v-for="product in productList" :key="product.id" style="margin-bottom: 10px;">
                <el-col :span="24">
                  <img :src="product.image" alt="商品图片" style="width: 100%; height: 200px;">
                </el-col>
              </el-row>
            </div>
            <el-empty v-else description="暂无数据" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>